<template>
  <div class="order-list">
    <div class="orderlists" v-if="orderList.length">
      <div class="orderBox" v-for="list in orderList" :key="list.id" >
        <van-cell center :value="list.state | FixState" style="border-radius: 20px 20px 0 0;">
          <template #title>
            <van-tag color="#7232dd"  size="medium">{{list.isDelivery ? '外卖' : '自提'}}</van-tag>
            <span class="custom-title" style="font-size:14px;">{{list.isDelivery ? list.address.detail : list.address.name}}</span>
          </template>
        </van-cell>
        <van-cell center style="border-radius: 0 0 20px 20px;">
          <div class="listBox" v-for="item in list.shop" :key="item.id">
          <van-image width="45px" height="45px" lazy-load :src="'http://img.zuiyu1818.cn' + item.shop_imgUrl"/>
            <h5 class="listTitle van-ellipsis">{{item.shop_name}}</h5>
            <span class="listNum">x {{item.amount}}</span>
          </div>
          <div class="Listmsg">
            <span class="listTime">{{list.date}}</span>
            <span class="listAmount">共{{list.shop.length}}件商品</span>
            <span class="listMoney">合计:￥{{list.payment}}</span>
          </div>
        </van-cell>
      </div>
    </div>
    <div v-else >
        <van-empty description="啥都木有喔" style="height:88vh">
          <van-button round type="danger" class="bottom-button" @click="gotoshopping">
            去购物吧！
          </van-button>
        </van-empty>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell, CellGroup, Tag, Image as VanImage, Lazyload, Empty, button } from 'vant'
import { getOrderLists } from '@/API/getordertype'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(VanImage)
Vue.use(Empty)
Vue.use(button)
Vue.use(Lazyload, {
  lazyComponent: true
})

export default {
  name: 'order-list',
  data () {
    return {
      orderList: []
    }
  },
  methods: {
    gotoshopping () {
      this.$router.push('/menu')
    }
  },
  computed: {
    calcDate (data) {
      console.log(data)
      var dataee = new Date(data).toJSON()
      var birthDay = new Date(+new Date(dataee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      console.log(birthDay)
      return birthDay
    }
  },
  created () {
    if (getOrderLists()) {
      getOrderLists().then(res => {
        console.log(res)
        if (res.meta.code === 200) {
          this.orderList = res.body
          console.log(this.orderList)
          this.orderList.map(item => {
            const time = new Date(item.date).toJSON()
            item.date = new Date(+new Date(time) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
            return item
          })
          console.log(this.orderList)
          var birthDay = new Date(+new Date(new Date('2020-07-17T02:37:53.000Z').toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
          console.log(birthDay)
        }
      }).catch(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-button {
    width: 160px;
    height: 40px;
  }
.order-list{
  // height:88vh;
  padding:0 10px;
  background: #EFEFEF;
  overflow-x: hidden;
  .orderlists{
    border-radius: 20px;
    height:88vh;
    .orderBox{
      margin-bottom:15px;
      &:nth-child(1){
        margin-top:15px;
      }
      .van-cell__title{
        flex: 2.5;
      }
      .custom-title{
        margin-left:10px
      }
      .listBox{
        display: flex;
        align-items: center;
        margin: 5px 0;
        height: 55px;
        .img{
          flex:1;
        }
        .listTitle{
          flex: 2;
          padding-left: 15px;
          font-size: 12px;
          font-weight: bold;
        }
        .listNum{
          flex: 0.3;
          text-align: right;
        }
      }
      .Listmsg{
        font-size: 12px;
        display: flex;
        .listTime{
          font-size: 12px;
          flex: 1.3;
        }
        .listAmount{
          font-size: 12px;
          flex: 1;
          text-align: right;
          padding-right: 5px;
        }
        .listMoney{
          flex: 1;
          // padding-left: 25px;
          text-align: center;
        }
      }
    }
  }
}
</style>
